<template>
    <div class="login">
      <h1>宠物商城后台管理系统</h1>
      <div class="loginBox">
        <div class="loginLogo">
          <img src="@/assets/img/tou.png" alt />
        </div>
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="0px" class="login_form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-s-custom"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"
              type="password"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" class="login-button" @click="login">登录</el-button>
            <el-button type="info" class="reset-button" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "LoginPage",
    data() {
      return {
        loginForm: {
          username: "",
          password: ""
        },
        rules: {
          username: [
            { required: true, message: "请输入登录名称", trigger: "blur" },
            { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
          ],
          password: [
            { required: true, message: "请输入合法的密码", trigger: "blur" }
          ]
        }
      };
    },
    methods: {
      reset() {
        this.$refs.loginFormRef.resetFields();
      },
      login() {
        // this.$refs.loginFormRef.validate(valid => {
        //   if (!valid) return;
  
        //   this.$http
        //     .post("http://localhost:8085/login", this.loginForm)
        //     .then(response => {
        //       if (response.data.code === 1) {
        //         this.$message({
        //           showClose: true,
        //           message: "登录成功",
        //           type: "success"
        //         });
        //         const userData = JSON.stringify(response.data.data);
        //         window.sessionStorage.setItem('userData', userData);
        //         this.$router.push('/home');
        //       } else {
        //         this.$message({
        //           showClose: true,
        //           message: response.data.msg || "登录失败，请检查用户名和密码",
        //           type: "error"
        //         });
        //         this.reset(); // 重置输入框
        //       }
        //     })
        //     .catch(error => {
        //       console.log(error);
        //       this.$message({
        //         showClose: true,
        //         message: "网络错误，请稍后再试",
        //         type: "error"
        //       });
        //     });
        // });


        // 先不做登录验证，直接跳转到首页
        alert('登录成功');
        this.$router.push('/home');

      }
    }
  };
  </script>
  
  <style scoped>
  html,
  body {
    width: 100%;
    height: 100%;
  }
  
  .login {
    width: 100%;
    height: 100%;
    background: url("@/assets/img/welcome1.jpg") center center no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
  }
  
  .login h1 {
    text-align: center;
    color: white;
    font-size: 42px;
    margin-top: 45px;
    letter-spacing: 0.2em;
  }
  
  .loginBox {
    width: 500px;
    height: 300px;
    border-radius: 10px;
    background: rgba(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -150px;
  }
  
  .loginLogo {
    width: 130px;
    height: 130px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    position: absolute;
    top: 0%;
    left: 50%;
    margin-left: -65px;
    margin-top: -65px;
  }
  
  .loginLogo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  
  .btns {
    overflow: hidden;
    /* 清除浮动 */
  }
  
  .login-button {
    float: left;
    /* 登录按钮左浮动 */
  }
  
  .reset-button {
    float: right;
    /* 重置按钮右浮动 */
  }
  
  .login_form {
    position: absolute;
    bottom: 0px;
    width: 80%;
    margin-left: 10%;
  }
  </style>
  